<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册步进器</title>
    <script src="./assets/js/vue.js"></script>
    <style>
        #wrap{
            width: 800px;
            height: 400px;
            margin: 20px auto;
            text-align: center;
            font-size: 20px;
        }
        #wrap>div>i{
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: #cccccc;
            border-radius: 20px;
            line-height: 40px;
            vertical-align: bottom;
        }
        i{
            font-style: normal;
        }
        #wrap>div>span{
            vertical-align: super
        }
        #card{
            margin: 30px auto;
            width: 700px;
            height: 360px;
            box-shadow: 0 0 12px #9e9e9e;
            border-radius: 20px;
        }
        input[type="text"]{
            width: 240px;
        }
        input[type="password"]{
            width: 240px;
        }
        #card>div{
            padding-top: 20px;
        }
        .active-i{
            color: #fff;
            background-color: #008000 ! important;    
        }
        .active-span{
            color: #008000;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="wrap">
            <h2>用户注册</h2>
            <div>
                <i class="active-i">1</i>
                <span class="active-span" >账号密码 ——— </span>
                <i :class="flag>1 ?'active-i':''">2</i>
                <span :class="flag>1 ?'active-span':''">手机绑定 ——— </span>
                <i :class="flag>2 ?'active-i':''">3</i>
                <span :class="flag>2 ?'active-span':''">邮箱绑定 ——— </span>
                <i :class="flag>3 ?'active-i':''">4</i>
                <span :class="flag>3 ?'active-span':''"> 注册完成</span>
            </div>
            <!-- 变换体部分 -->
            <div id="card">
                <div v-if="flag==1" >
                    <h3>账号密码</h3>
                    <div>
                        账号：<input type="text">
                    </div>
                    <div>
                        密码：<input type="password">
                    </div>
                    <input type="button" value="下一步" @click="flag++">
                </div>
                <div v-else-if="flag==2">
                    <h3>手机绑定</h3>
                    <div>
                        手机：<input type="text">
                    </div>
                    <input type="button" value="上一步" @click="flag--">
                    <input type="button" value="下一步" @click="flag++">
                </div>
                <div v-else-if="flag==3" >
                    <h3>邮箱绑定</h3>
                    <input type="button" value="上一步" @click="flag--">
                    <input type="button" value="下一步" @click="flag++">
                </div>
                <div v-else="flag==4">
                    <h3>注册完成</h3>
                    <input type="button" value="上一步" @click="flag--">
                    <input type="button" value="注册用户">
                </div>
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                flag:1
            }
        })
    </script>
</body>
</html>